<script setup>
defineOptions({ name: "首页" });
import { computed } from "vue";
//轮播图图片(符合命名规范即可自动导入)
const images = import.meta.glob("@/assets/pictures/banner*.png", {
  eager: true,
  import: "default",
});
// 动态引入组件
const components = import.meta.glob("@/components/*.vue", {
  eager: true,
  import: "default",
});
//从小到大排序
const componentValues = Object.values(components).sort(
  (a, b) => a.index - b.index
);
// 根据屏幕大小设置轮播图高度
const carouselHeight = computed(() => {
  return window.innerWidth > 768 ? "500px" : "160px";
});
</script>

<template>
  <!-- banner start -->
  <a-carousel
    :style="{
      width: '100%',
      height: carouselHeight,
    }"
    :auto-play="true"
    animation-name="fade"
    indicator-type="dot"
    show-arrow="hover"
  >
    <a-carousel-item v-for="image in images">
      <img
        :src="image"
        :style="{
          width: '100%',
        }"
      />
    </a-carousel-item>
  </a-carousel>
  <!-- end banner -->

  <!-- 动态引入组件 -->
  <template v-for="(component, key) in componentValues" :key="key">
    <component :is="component" />
  </template>
</template>

<style scoped></style>
